<!--
@fucntion: 平台类设备基本情况
-->
<template>
  <el-card style="background-color: #F2F6FC;">
    <el-card style="background-color: #DCDFE6;"> 
      <el-row :gutter="24">
          <el-col :span="6">
            <span>设备总数: {{Adata.PTLSBZSL}}</span>
          </el-col>
          <el-col :span="6">
            <span>总原值: {{Adata.PTLSBZYZ}}(万元)</span>
          </el-col>
          <el-col :span="12">
            <el-date-picker
              v-model="Adata.value"
              type="daterange"
              align="right"
              unlink-panels
              @input="changeRefresh()"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
        </el-row>
    </el-card>
    <el-card>
      <el-card style="background-color: #F2F6FC;"> 
        <span style="font-size:14px; float: left">专项类设备年代情况</span>
      </el-card>
      <el-row :gutter="24">
        <el-col :span="10"> 
          <el-table
            size="mini"
            :data="Adata.PlatformData"
            height="300"
            border
            style="width: 100%">
            <el-table-column
              prop="PTLSBKS"
              label="科室">
            </el-table-column>
            <el-table-column
              prop="PTLSBSL"
              label="台件">
            </el-table-column>
            <el-table-column
              prop="PTLSBYZ"
              label="原值(万元)">
            </el-table-column>
          </el-table>
        </el-col>
       <el-col :span="14">
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main" style="width: 100%;height:300px"></div>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-card style="background-color: #F2F6FC;"> 
        <span style="font-size:14px; float: left">选中时间段合计</span>
      </el-card>
      <el-card> 
        <el-row :gutter="24">
          <el-col :span="6">
              <span>总设备: {{Adata.PTLSB_XZ_SL}}</span>
            </el-col>
            <el-col :span="6">
              <span>总原值: {{Adata.PTLSB_XZ_YZ}}(万元)</span>
            </el-col>
        </el-row>
      </el-card>
    </el-card>
  </el-card>
</template>

<script>
//导入echarts
import echarts from "echarts";

export default {
  name: "Detailed",
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          },{ 
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近三年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365*3);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      dataAttr:[],//柱状图图数据
       Adata:{
        PlatformData:[],
        value:'',
        PTLSBZSL:0,
        PTLSBZYZ:0,
        PTLSB_XZ_SL:0,
        PTLSB_XZ_YZ:0,
      },
    };
  },
  methods: {
    changeRefresh(){
      var me = this;
      this.Refresh();
      me.$message.success("更改时间段成功！");
    },
    //刷新页面
    Refresh() {
      var me = this;
      this.Adata.PTLSB_XZ_SL = 0
      this.Adata.PTLSB_XZ_YZ = 0
      let url = "/static/data/Platform.json";// /jcJsxxb
      if(url !== "") {
        me.getRequest(url).then(resp => {
            if(resp.status == 200) {
              this.Adata.PlatformData = resp.data.results;
              this.Adata.PTLSBZSL = resp.data.PTLSBZSL;
              this.Adata.PTLSBZYZ = resp.data.PTLSBZYZ;
              this.dataAttr = resp.data.data;
              this.onto();
              this.onSJHC();
            }
        });
      }
    },
    onSJHC(){//数据合成
      for(var i=0;i<this.Adata.PlatformData.length;i++){
        this.Adata.PTLSB_XZ_SL = this.Adata.PTLSB_XZ_SL + this.Adata.PlatformData[i].PTLSBSL
        this.Adata.PTLSB_XZ_YZ = this.Adata.PTLSB_XZ_YZ + this.Adata.PlatformData[i].PTLSBYZ
      }
    },
    onto: function() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var colors = ['#5793f3', '#d14a61'];

      var option = {
          color: colors,

          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross'
              }
          },
          grid: {
              right: '20%'
          },
          toolbox: {
              feature: {
                  dataView: {show: true, readOnly: false},
                  restore: {show: true},
                  saveAsImage: {show: true}
              }
          },
          legend: {
              data: ['数量', '原值']
          },
          xAxis: [
              {
                  type: 'category',
                  axisTick: {
                      alignWithLabel: true
                  },
                  data: this.dataAttr.data1
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  name: '数量',
                  min: 0,
                  max: 500,
                  position: 'left',
                  axisLine: {
                      lineStyle: {
                          color: colors[0]
                      }
                  },
                  axisLabel: {
                      formatter: '{value} 台/件'
                  }
              },
              {
                  type: 'value',
                  name: '原值',
                  min: 0,
                  max: 10000,
                  position: 'right',
                  axisLine: {
                      lineStyle: {
                          color: colors[1]
                      }
                  },
                  axisLabel: {
                      formatter: '{value} 万元'
                  }
              }
          ],
          series: [
              {
                  name: '数量',
                  type: 'bar',
                  data: this.dataAttr.data2
              },
              {
                  name: '原值',
                  type: 'bar',
                  yAxisIndex: 1,
                  data: this.dataAttr.data3
              },
          ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  created: function() {
    var me = this;
    this.Refresh()
  },
};
</script>

<style lang="scss">
</style>